<template>
  <a-card title="安全信息">
    <List title="账号密码" :description="`当前密码强度：${accountPwdSafe}`">
      <a-button type="link" @click="openChangePwdModal(true, 'password')">编辑</a-button>
    </List>
    <List title="支付密码" :description="`当前密码强度：${payPwdSafe}`">
      <a-button type="link" @click="openChangePwdModal(true, 'payPwd')">编辑</a-button>
    </List>
    <List title="声音提示" description="是否开启/关闭提示音">
      <a-switch v-model:checked="openAudio" />
    </List>
    <List title="编辑TG" description="请配置您的联系方式">
      <a-button type="link" @click="openEditContactModal(true)">编辑</a-button>
    </List>

    <change-pwd @register="registerChangePwd" />
    <edit-contact @register="registerEditContact" />
  </a-card>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import changePwd from '../modal/changePwd.vue';
  import editContact from '../modal/editContact.vue';
  import { useModal } from '@/components/Modal';
  import List from './list.vue';
  import { GetSafeApi } from '@/api/user';

  const openAudio = ref(false);
  const accountPwdSafe = ref('弱');
  const payPwdSafe = ref('弱');

  const [registerChangePwd, { openModal: openChangePwdModal }] = useModal();
  const [registerEditContact, { openModal: openEditContactModal }] = useModal();

  onMounted(() => {
    GetSafeApi().then((res) => {
      openAudio.value = res.prompt == '1';
      accountPwdSafe.value = res.PasswordStrength === 1 ? '强' : '弱';
      payPwdSafe.value = res.payment === 1 ? '强' : '未设置';
    });
  });
</script>
